<template>
  <!-- 购物车列表项 -->
  <div class="boxx">
    <!-- 循环cart数据 渲染页面 -->
    <div class="list" v-for="(item,index) in cart" :key="index">
      <!-- 复选框按钮 -->
      <div class="checkbox">
        <input type="checkbox" class="tui-checkbox" v-model="item.checked" />
      </div>
      <div class="right">
        <!-- 商品店铺名 -->
        <!-- <div class="name">{{ item.shopname }} &gt;</div> -->
        <div class="name">喜欢你 ♡ &gt;</div>
        <dl>
          <dt>
            <!-- 商品图片 -->
            <img :src="item.image" alt />
          </dt>
          <dd>
            <!-- 商品标题 -->
            <div>{{ item.title }}</div>
            <div>
              <!-- 商品净含量 -->
              <li>净含量：{{ item.cid }}</li>
              <li>
                <!-- 按钮-- -->
                <div @click="decr(item,index)">-</div>
                <!-- 商品数量 -->
                <div>{{ item.num }}</div>
                <!-- 按钮++ -->
                <div @click="incr(item,index)">+</div>
              </li>
            </div>
            <div>
              <!-- 商品价格 -->
              <li>￥ {{ item.price }}</li>
              <li>
                <!-- 删除按钮 -->
                <img @click="del(item,index)" src="../../assets/img/del.png" alt />
              </li>
            </div>
          </dd>
        </dl>
        <!-- 此商品的合计 -->
        <div class="total">本仓总计：￥ {{ item.num * item.price }}</div>
      </div>
    </div>
    <!-- cartTotal是全部商品的合计 并提交订单 -->
    <van-submit-bar :price="cartTotal*100" button-text="提交订单" @submit="onSubmit">
      <!-- 全选的复选框按钮 -->
      <div class="checkbox">
        <input
          type="checkbox"
          class="tui-checkbox"
          v-model="isAllChecked"
          @change="handleAllChecked"
        /> 全选
      </div>
    </van-submit-bar>
    <!-- {{checkgroup}} -->
  </div>
</template>

<script>
// 全局引入vant 并注册
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);

// 引入模块化命名
import { CART_DATA, CART_INCR, CART_DECR, CART_DEL } from "../../store/types";

export default {
  data() {
    return {
      checked: [],
      // cartTotal: 0,
      cart: [],
      result: [],

      checkgroup: [],
      isAllChecked: true,
    };
  },
  computed: {
    // 侦听合计 实时更新数据
    cartTotal() {
      return this.$store.getters["cart/cartTotal"];
    },
  },
  mounted() {
    // 获取数据并赋值
    this.cart = this.$store.state.cart.cartData;
    this.checkedArr = this.cart.index;
  },
  watch: {
    // 深度侦听数据 确定复选项的选项
    cart: {
      handler(newVal) {
        if (newVal !== null) {
          this.$store.commit("cart/changeState", newVal);
          this.isAllChecked = newVal.every((v) => {
            return v.checked === true;
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    // 提交按钮
    onSubmit() {
      // 跳转路由
      this.$router.push({ path: "/tijiaodingdan" });
    },
    // 按钮--
    decr(item, index) {
      // this.$store.dispatch(CART_DECR, index);
      if (this.cart[index].num > 1) {
        this.cart[index].num--;
      } else {
        Dialog.confirm({
          title: "提示",
          message: "您真的不考虑了吗？",
        })
          .then((index) => {
            // on confirm
            this.cart.splice(index, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 按钮++
    incr(item, index) {
      // this.$store.dispatch(CART_INCR, index);
      this.cart[index].num++;
    },
    // 删除按钮
    del(item, index) {
      // this.$store.dispatch(CART_DEL, index);
      // delete this.cart[index]
      // this.cart.splice(index, 1);
      Dialog.confirm({
        title: "提示",
        message: "您真的不考虑了吗？",
      })
        .then((index) => {
          // on confirm
          // console.log(res)
          this.cart.splice(index, 1);
          localStorage.removeItem("cart");
          // console.log(localStorage.getItem("cart"));
          // if(localStorage.getItem('cart'))
        })
        .catch(() => {
          // on cancel
          // console.log(ret)
        });
    },
    // 复选框事件
    handleAllChecked() {
      // console.log(this.isAllChecked);
      if (this.isAllChecked) {
        this.cart.forEach((v) => {
          v.checked = true;
        });
      } else {
        this.cart.forEach((v) => {
          v.checked = false;
        });
      }
    },
    // checkFn(i){
    //   this.isAllChecked = this.cart.every(v=>{
    //     console.log(v.checked)
    //     return v.checked === true
    //   })
    // }
  },
};
</script>

<style lang="scss" scoped>
.boxx {
  background-color: #f0f0f0;
  // background-color: #d43636;
  .van-submit-bar {
    // background: chocolate;
    border-top: 1px solid #f0f0f0;
    position: fixed;
    bottom: 51px;
    left: 0;
  }
  .list {
    background: #fff;
    // background: rgb(160, 143, 143);
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    // .checkbox {
    //   // background: chartreuse;
    //   padding: 0 10px;
    //   display: flex;
    //   align-items: center;
    //   .tui-checkbox:checked {
    //     background: #e31436;
    //   }
    //   .tui-checkbox {
    //     width: 25px;
    //     height: 25px;
    //     background-color: #ffffff;
    //     border: solid 1px #dddddd;
    //     -webkit-border-radius: 50%;
    //     border-radius: 50%;
    //     // font-size: 15px;
    //     margin: 0;
    //     padding: 0;
    //     position: relative;
    //     display: inline-block;
    //     vertical-align: top;
    //     cursor: default;
    //     -webkit-appearance: none;
    //     -webkit-user-select: none;
    //     user-select: none;
    //     -webkit-transition: background-color ease 0.1s;
    //     transition: background-color ease 0.1s;
    //   }
    //   .tui-checkbox:checked::after {
    //     content: "";
    //     top: 5px;
    //     left: 5px;
    //     position: absolute;
    //     background: transparent;
    //     border: #fff solid 2px;
    //     border-top: none;
    //     border-right: none;
    //     height: 6px;
    //     width: 10px;
    //     -moz-transform: rotate(-45deg);
    //     -ms-transform: rotate(-45deg);
    //     -webkit-transform: rotate(-45deg);
    //     transform: rotate(-45deg);
    //   }
    // }
    .right {
      width: 100%;
      .name {
        color: #333;
        font-size: 13px;
        line-height: 44px;
        border-bottom: 1px solid #f0f0f0;
      }
      dl {
        margin: 14px 0 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        dt {
          width: 100px;
          height: 100px;
          // float: left;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          width: 250px;
          margin: 0 14px;
          div:nth-child(1) {
            // background: chocolate;/
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          div:nth-child(2) {
            margin-top: 10px;
            display: flex;
            li:first-child {
              // background: rgb(12, 36, 82);
              width: 200px;
              color: #999;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            li:last-child {
              display: flex;
              div {
                // background: rgb(20, 220, 87);
                width: 30px;
                height: 30px;
                color: #333;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #f0f0f0;
              }
              div:nth-child(2) {
                margin-top: 0;
                width: 36px;
              }
            }
          }
          div:nth-child(3) {
            // background: cornflowerblue;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            li:first-child {
              font-size: 14px;
              color: red;
            }
            li:last-child {
              width: 16px;
              height: 18px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
                margin-top: 12px;
              }
            }
          }
        }
      }
      .total {
        text-align: right;
        margin-right: 20px;
        font-size: 12px;
        color: #333;
        line-height: 30px;
        // background: sandybrown;
      }
    }
  }
}

.checkbox {
  // background: chartreuse;
  padding: 0 10px;
  display: flex;
  align-items: center;
  .tui-checkbox:checked {
    background: #e31436;
  }
  .tui-checkbox {
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    // font-size: 15px;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
  }
  .tui-checkbox:checked::after {
    content: "";
    top: 5px;
    left: 5px;
    position: absolute;
    background: transparent;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 10px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
</style>